import { useStore } from '../store/useStore'

const steps = [
  { id: 1, name: '上传图片', icon: '📸', description: '上传产品图片' },
  { id: 2, name: '生成3D', icon: '🎨', description: 'AI生成3D模型' },
  { id: 3, name: '定制选项', icon: '🎯', description: '选择材质和尺寸' },
  { id: 4, name: '下单支付', icon: '🛒', description: '确认订单并支付' }
]

export default function ProgressSteps() {
  const currentStep = useStore((state) => state.currentStep)
  const modelUrl = useStore((state) => state.modelUrl)
  
  // 根据状态自动确定当前步骤
  const activeStep = modelUrl ? Math.max(currentStep, 3) : currentStep

  return (
    <div className="glass-effect-dark rounded-xl p-3 md:p-5 border border-white/10 animate-slide-down">
      {/* 移动端：紧凑版本 */}
      <div className="block md:hidden">
        <div className="flex items-center justify-between mb-2">
          <span className="text-sm font-semibold text-gray-300">
            进度：第 {activeStep} / {steps.length} 步
          </span>
          <span className="text-xs text-gray-500">
            {steps[activeStep - 1]?.name}
          </span>
        </div>
        <div className="relative h-2 bg-white/10 rounded-full overflow-hidden">
          <div 
            className="absolute inset-y-0 left-0 bg-gradient-to-r from-accent-purple via-accent-blue to-accent-cyan rounded-full transition-all duration-500"
            style={{ width: `${(activeStep / steps.length) * 100}%` }}
          >
            <div className="absolute inset-0 shimmer"></div>
          </div>
        </div>
      </div>

      {/* 桌面端：完整版本 */}
      <div className="hidden md:block">
        <div className="relative">
          {/* 连接线 */}
          <div className="absolute top-10 left-0 right-0 h-1 bg-white/10 rounded-full" 
               style={{ marginLeft: '2rem', marginRight: '2rem' }}
          >
            <div 
              className="h-full bg-gradient-to-r from-accent-purple via-accent-blue to-accent-cyan rounded-full transition-all duration-700 ease-out relative overflow-hidden"
              style={{ width: `${((activeStep - 1) / (steps.length - 1)) * 100}%` }}
            >
              <div className="absolute inset-0 shimmer"></div>
            </div>
          </div>

          {/* 步骤节点 */}
          <div className="relative grid grid-cols-4 gap-4">
            {steps.map((step, index) => {
              const isActive = activeStep === step.id
              const isCompleted = activeStep > step.id
              const isFuture = activeStep < step.id

              return (
                <div 
                  key={step.id} 
                  className="flex flex-col items-center relative"
                  style={{ 
                    animationDelay: `${index * 0.1}s`,
                    opacity: 0,
                    animation: 'slideDown 0.5s ease-out forwards'
                  }}
                >
                  {/* 步骤图标 */}
                  <div className={`
                    relative z-10 w-16 h-16 rounded-xl flex items-center justify-center text-2xl
                    transition-all duration-500 transform
                    ${isActive 
                      ? 'bg-gradient-to-br from-accent-purple via-accent-blue to-accent-cyan shadow-xl shadow-accent-purple/50 scale-110 animate-pulse' 
                      : isCompleted
                      ? 'bg-gradient-to-br from-green-500 to-emerald-600 shadow-lg shadow-green-500/30'
                      : 'bg-white/5 border-2 border-white/20'
                    }
                    ${!isFuture && 'hover:scale-105 cursor-pointer'}
                  `}>
                    {isCompleted ? (
                      <svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                      </svg>
                    ) : (
                      <span className={`transition-transform duration-300 ${isActive ? 'scale-110' : ''}`}>
                        {step.icon}
                      </span>
                    )}
                    
                    {/* 活动步骤的光环 */}
                    {isActive && (
                      <div className="absolute -inset-2 bg-gradient-to-br from-accent-purple to-accent-cyan rounded-xl opacity-30 blur-lg animate-pulse"></div>
                    )}
                  </div>

                  {/* 步骤信息 */}
                  <div className={`mt-3 text-center transition-all duration-300 ${
                    isActive ? 'scale-105' : ''
                  }`}>
                    <div className={`text-sm font-bold mb-0.5 ${
                      isActive 
                        ? 'text-white gradient-text' 
                        : isCompleted
                        ? 'text-green-400'
                        : 'text-gray-400'
                    }`}>
                      {step.name}
                    </div>
                    <div className={`text-xs ${
                      isActive 
                        ? 'text-gray-300' 
                        : 'text-gray-500'
                    }`}>
                      {step.description}
                    </div>
                    
                    {/* 步骤状态标签 */}
                    {isActive && (
                      <div className="mt-1.5 inline-flex items-center space-x-1 px-2 py-0.5 bg-accent-purple/20 border border-accent-purple/40 rounded-full animate-pulse">
                        <span className="w-1.5 h-1.5 bg-accent-purple rounded-full"></span>
                        <span className="text-xs text-accent-purple font-semibold">进行中</span>
                      </div>
                    )}
                    {isCompleted && (
                      <div className="mt-1.5 inline-flex items-center space-x-1 px-2 py-0.5 bg-green-500/20 border border-green-500/40 rounded-full">
                        <span className="text-xs text-green-400 font-semibold">✓ 已完成</span>
                      </div>
                    )}
                  </div>
                </div>
              )
            })}
          </div>
        </div>

        {/* 进度提示 */}
        <div className="mt-4 p-2.5 bg-accent-blue/10 rounded-lg border border-accent-blue/30 backdrop-blur-sm">
          <p className="text-xs text-gray-300 flex items-center justify-center space-x-2">
            <svg className="w-4 h-4 text-accent-blue flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
            </svg>
            <span>
              {activeStep === 1 && '💡 上传清晰的产品图片，获得更好的3D效果'}
              {activeStep === 2 && '⏳ AI正在为您生成高质量3D模型，请稍候...'}
              {activeStep === 3 && '🎨 选择您喜欢的材质、尺寸和颜色'}
              {activeStep === 4 && '🎉 最后一步！确认订单信息即可完成下单'}
            </span>
          </p>
        </div>
      </div>
    </div>
  )
}

